<script setup>
import { reactive, watch } from 'vue'

const _props = defineProps({
  url: {
    type: Object,
    default: () => {}
  }
})

const detail = reactive({
  description: '',
  thumbnailUrl: '',
  title: '',
  url: ''
})

watch(
  () => _props.url,
  (newVal) => {
    Object.assign(detail, newVal)
  },
  { immediate: true }
)
</script>

<template>
  <div class="mx-4 my-2 overflow-hidden w-full">
    <div class="flex flex-row items-center justify-start mt-2">
      <div class="mr-2 flex flex-row items-center justify-center">
        <el-avatar class="bg-transparent" :size="24" fit="fill" :src="detail.iconUrl" />
      </div>
      <span class="text-wrap w-full inline-block break-words hyphens-auto whitespace-pre-wrap">{{
        detail.title
      }}</span>
    </div>
    <el-divider />
    <el-text
      v-if="detail.description"
      class="text-wrap w-full inline-block break-words hyphens-auto whitespace-pre-wrap"
      size="default"
      >{{ detail.description }}</el-text
    >
    <el-text
      v-if="detail.appid"
      class="text-wrap w-full inline-block break-words hyphens-auto whitespace-pre-wrap"
      size="default"
    >
      {{ detail.appid }}
    </el-text>

    <el-text
      v-if="detail.pagePath"
      class="text-wrap w-full inline-block break-words hyphens-auto whitespace-pre-wrap"
      size="default"
    >
      {{ detail.pagePath }}
    </el-text>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-image-viewer__close) {
  width: 36px;
  height: 36px;
  margin-top: 20px;
}
</style>
